<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>

<form action="/dailyplan/completePlan" method="post" enctype="multipart/form-data">
    <input type="hidden" th:value="${param.id}" name="id" >
    <div id="htmls">
        <input type="file" class="file" style="display: none" name="file">
        <div></div>
        <button type="button" class="layui-btn layui-btn-warm" >添加图片</button>
    </div>

        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="add"><i class="layui-icon"></i></button>
    <button type="submit" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius" id="subfile">保存</button>
</form>

<script>
    $(function () {

        //上传文件
        $("form").on("click",".layui-btn-warm",function () {
            $(this).prev().prev().click();
            var hh=$(this);
            $(this).prev().prev().change(function(){
                    var objUrl = getObjectURL(this.files[0]) ;

                   hh.prev().html("");

                    var img =$("<img style='width:140px;hegith:100px' src="+objUrl+">");
                   hh.prev().append(img);
                })
        })
        //添加
        $("#add").click(function () {
            var ht =$("#htmls").html();
            var divs =$("<div>"+ht+"<button type=\"button\" class=\"layui-btn layui-btn-primary layui-btn-sm\" id='del'><i class=\"layui-icon\" ></i></button></div>")
            divs.insertBefore($("#add"))
        })
        //删除
        $("form").on("click",".layui-btn-sm[id=del]",function () {
            $(this).parent().remove();
        })


    })

    layui.use(['form', 'layedit', 'laydate', 'jquery'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , $ = layui.jquery;

        //提交
        $("#subfile").click(function () {
            if(files()==false){
                return false;
            }else {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
                return true;
            }
        })
    })


    //上传图片预览
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined)
        { // basic
            url = window.createObjectURL(file) ;
        }
        else if (window.URL!=undefined)
        {
            // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        }
        else if (window.webkitURL!=undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    //判断文件是不是为空

    function  files() {
        var flag=true;

        var files =$(".file");
        files.each(function () {
            if($(this).val()==null ||$(this).val()==""){
                flag=false;
             return;
            }
        })

        return flag;
    }

</script>
</body>
</html>